<template>
  <div class="vpt-modal-base-self-bg" v-if="showModal">
    <div class="vpt-modal-base-self" :style="{ width: width }">
      <header class="vpt-modal-base-self-header">
        <div class="vpt-title">{{ title }}</div>
        <div class="vpt-close" @click="onShowModal(false)">
          <img :src="close" alt="关闭" />
        </div>
      </header>
      <section class="vpt-modal-base-self-body">
        <slot name="content"></slot>
      </section>
    </div>
  </div>
</template>

<script setup>
import close from "@/assets/img/theme1/close.png";

const emit = defineEmits(["onChange"]);

const props = defineProps({
  showModal: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: "5rem"
  },
  title: {
    type: String,
    default: "",
  },
});

const onShowModal = (value) => {
  emit("onChange", value);
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
